import React from 'react';
import {
  TextInput,
  Text,
  TouchableOpacity,
  Image,
  View
} from 'react-native';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as categoryCreators from '../actions/Home';

import { BaseComponent, NavBar } from '../wedgets';
// import Find from './Find';
// import RiskAssessCenter from './RiskAssess';
// import InfomationCenter from './Information';
// import styles from './css/Home';
// import Storage from '../lib/AsyncStorageUtil/AsyncStorageUtil';  

type Props = {};
class App extends BaseComponent<Props> {
  static navigationOptions = ({ navigation }) => ({
    header:null
  })
  constructor(props) {
    super(props);
    this.state = {
      tabShow: false
    }
    this.keywords = [];
  }
  componentDidMount() {

    setTimeout(() => {
      this.setState({
        tabShow: true
      });
    }, 100)
  }

  render() {
    const { navigation } = this.props;
    let home = this.props.Home || '';
    return (
      <View style={{ flex: 1,justifyContent:'center',alignItems:'center' }}>
        <Image
          resizeMode={'stretch'}
          source={require('./imges/login_bg.png')}
          style={{ position: 'absolute', width: SCREEN_W, height: SCREEN_H, left: 0,opacity:0.5 }} />
        <View style={{width:SCREEN_W,height:100}}>
          <View style={{width:SCREEN_W,flexDirection:'row',alignItems:'center',paddingHorizontal:20}}>
            <Image style={{width:40,height:40}} source={require('./imges/user.png')}/>
            <View style={{flex:1,borderRadius:5,backgroundColor:'#eee',paddingHorizontal:10}}>
              <TextInput style={{flex:1,height:40,marginLeft:10}} placeholder={'User Name'}/>
            </View>
          </View>
          <View style={{width:SCREEN_W,flexDirection:'row',alignItems:'center',paddingHorizontal:20,marginTop:20}}>
            <Image style={{width:40,height:40,marginRight:5}} source={require('./imges/password.png')}/>
            <View style={{flex:1,borderRadius:5,backgroundColor:'#eee',paddingHorizontal:10}}>
              <TextInput style={{flex:1,height:40,marginLeft:10}} placeholder={'Password'}/>
            </View>
          </View>
        </View>

        <TouchableOpacity style={{width:280,marginTop:40,height:44,borderRadius:22,borderColor:'#BFBFBF',borderWidth:1,justifyContent:'center',alignItems:'center'}} onPress={()=>{
          navigation.navigate('NextPage')
        }}>
          <Text style={{color:'#BFBFBF',fontSize:18,fontWeight:'bold'}}>登录</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  const { Home } = state;
  return {
    Home
  };
};

const mapDispatchToProps = (dispatch) => {
  const categoryActions = bindActionCreators(categoryCreators, dispatch);
  return {
    categoryActions
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
